<template>
  <div>
    <Header />
    <section class="inner-banner">
      <!-- <span class="banner-two__shape-1"></span>
      <span class="banner-two__shape-2"></span>
      <span class="banner-two__shape-3"></span>
      <span class="banner-two__shape-4"></span> -->
      <div class="container"></div>
      <!-- /.container -->
    </section>
    <div class="main-cnt" id="main-cnt">
      <div class="page-component__scroll el-scrollbar">
        <div
          class="el-scrollbar__wrap"
          style="margin-bottom: -17px; margin-right: -17px"
        >
          <div class="el-scrollbar__view">
            <div class="page-container page-component">
              <div class="page-component__nav el-scrollbar">
                <div
                  class="el-scrollbar__wrap"
                  style="margin-bottom: -17px; margin-right: -17px"
                >
                  <div class="el-scrollbar__view">
                    <h5>FusionView 所有文档</h5>
                    <el-menu
                      default-active="productName"
                      class="el-menu-vertical-demo"
                      @open="handleOpen"
                      @close="handleClose"
                      @select="handleSelect"
                      :collapse="isCollapse"
                    >

                      <el-menu-item index="productName">
                        <span slot="title">产品介绍</span>
                      </el-menu-item>
                      <!-- <el-submenu index="1">
                        <template slot="title">
                          <span index="productName" >产品介绍</span>
                        </template>

                        <el-menu-item index="productName" >产品名称</el-menu-item>
                        <el-menu-item index="productIntroduce" >产品介绍</el-menu-item>
                      </el-submenu> -->

                      <el-submenu index="2">
                        <template slot="title">
                          <span>操作指南</span>
                        </template>
                        <el-menu-item index="screen" >大屏编辑器界面</el-menu-item>
                        <el-menu-item index="charts" >图表组件操作</el-menu-item>
                        <el-submenu index="1-1">
                          <template slot="title">基础图表</template>
                          <el-submenu index="1-1-1">
                            <template slot="title">柱状图</template>
                            <el-menu-item index="bar">基本柱图</el-menu-item>
                            <el-menu-item index="stackedBar">堆叠图</el-menu-item>
                            <el-menu-item index="staggeredLabel">交错正负轴标签</el-menu-item>
                            <el-menu-item index="doublebar">双柱状图</el-menu-item>
                            <el-menu-item index="topbar">排行榜</el-menu-item>
                            <el-menu-item index="parallebar">水平柱图</el-menu-item>
                            <el-menu-item index="doubleyAxis">双Y轴柱图</el-menu-item>
                            <el-menu-item index="doubleDirectionBar">双向柱形图</el-menu-item>
                            <el-menu-item index="doublebartime">动态双向柱状图</el-menu-item>
                            <el-menu-item index="singleColumn">单柱图</el-menu-item>
                            <el-menu-item index="threeDBar">伪立体柱状图</el-menu-item>
                            <el-menu-item index="cylinder">立体柱</el-menu-item>
                            <el-menu-item index="rateBar">比例柱状图</el-menu-item>
                          </el-submenu>
                          <el-submenu index="1-1-2">
                            <template slot="title">折线图</template>
                              <el-menu-item index="lines">基本折线图</el-menu-item>
                              <el-menu-item index="shadowline">阴影折线图</el-menu-item>
                              <el-menu-item index="rain">雨量流量关系图</el-menu-item>
                          </el-submenu>
                          <el-submenu index="1-1-3">
                            <template slot="title">饼图</template>
                            <el-menu-item index="pie">基本饼图</el-menu-item>
                            <el-menu-item index="ringpie">环饼图</el-menu-item>
                          </el-submenu>
                          <el-menu-item index="funnel">漏斗图</el-menu-item>
                          <el-submenu index="1-1-4">
                            <template slot="title">仪表盘</template>
                              <el-menu-item index="guage">基本仪表盘</el-menu-item>
                              <el-menu-item index="keyguage">键盘仪表盘</el-menu-item>
                              <el-menu-item index="progauge">进度仪表盘</el-menu-item>
                          </el-submenu>
                          <el-menu-item index="scatter">散点图</el-menu-item>
                          <el-menu-item index="radar">雷达图</el-menu-item>
                          <el-submenu index="1-1-5">
                            <template slot="title">水球图</template>
                            <el-menu-item index="waterball">水球图</el-menu-item>
                            <el-menu-item index="waterballLine">水球图加基线</el-menu-item>
                            <el-menu-item index="customWaterball">自定义水球图</el-menu-item>
                          </el-submenu>
                          <el-submenu index="1-1-6">
                            <template slot="title">环形图</template>
                            <el-menu-item index="circles">圆点环形图</el-menu-item>
                            <el-menu-item index="piemore">多环形图</el-menu-item>
                            <el-menu-item index="progresses">进度图表</el-menu-item>
                          </el-submenu>
                          <el-submenu index="1-1-7">
                            <template slot="title">数据集</template>
                            <el-menu-item index="pieLine">饼图-折线图</el-menu-item>
                            <el-menu-item index="barPie">柱状图-饼图</el-menu-item>
                            <el-menu-item index="lineBar">折线图-柱状图</el-menu-item>
                            <el-menu-item index="mapBar">地图-柱状图</el-menu-item>
                          </el-submenu>
                          <el-submenu index="1-1-8">
                            <template slot="title">地图</template>
                            <el-menu-item index="maps">地图</el-menu-item>
                            <el-menu-item index="mapMore">地图下钻</el-menu-item>
                            <el-menu-item index="threedMap">3D地图</el-menu-item>
                            <el-menu-item index="mapline">飞线地图</el-menu-item>
                          </el-submenu>
                          <el-menu-item index="knowledge">关系图</el-menu-item>
                          <el-menu-item index="pops">气泡图</el-menu-item>
                          <el-menu-item index="sunburst">旭日图</el-menu-item>
                          <el-menu-item index="boxLine">箱线图</el-menu-item>
                          <el-menu-item index="sankey">桑基图</el-menu-item>
                          <el-menu-item index="customChart">自定义组件</el-menu-item>
                          
                          <el-submenu index="1-1-9">
                            <template slot="title">文本</template>
                            <el-menu-item index="normalText">文本框</el-menu-item>
                            <el-menu-item index="lamp">跑马灯</el-menu-item>
                            <el-menu-item index="date">实时时间</el-menu-item>
                            <el-menu-item index="colorBlock">颜色块</el-menu-item>
                            <el-menu-item index="wordcloud">字符云</el-menu-item>
                            <el-menu-item index="flop">翻牌器</el-menu-item>
                            <el-menu-item index="card">卡片</el-menu-item>
                          </el-submenu>

                          <el-submenu index="1-1-10">
                            <template slot="title">媒体</template>
                            <el-menu-item index="imageMedia">图片</el-menu-item>
                            <el-menu-item index="qRcode">二维码</el-menu-item>
                            <el-menu-item index="videoMedia">视频</el-menu-item>
                            <el-menu-item index="hyperlink">超链接</el-menu-item>
                            <el-menu-item index="iframeMedia">iframe</el-menu-item>
                            <el-menu-item index="rotation">轮播图</el-menu-item>
                            
                            <el-submenu index="2-1">
                              <template slot="title">特效</template>
                              <el-menu-item index="scanning">扫描</el-menu-item>
                              <el-menu-item index="turntable">转盘</el-menu-item>
                              <el-menu-item index="galaxy">银河系</el-menu-item>
                              <el-menu-item index="twinkleborder">闪烁边框</el-menu-item>
                              <el-menu-item index="aroundborder">游走边框</el-menu-item>
                              <el-menu-item index="ray">射线</el-menu-item>
                              <el-menu-item index="midikeyboard">MIDI键盘</el-menu-item>
                              <el-menu-item index="voiceprint">声纹</el-menu-item>
                              <el-menu-item index="diffuseray">发散射线</el-menu-item>
                            </el-submenu>

                          </el-submenu>
                          <el-submenu index="1-1-11">
                            <template slot="title">表格</template>
                            <el-menu-item index="taBle">分页表格</el-menu-item>
                            <el-menu-item index="tablerotation">滚动表格</el-menu-item>
                            <el-menu-item index="tabletop">排行表格</el-menu-item>
                          </el-submenu>
                          
                          <el-submenu index="1-1-12">
                            <template slot="title">条件</template>
                            <el-menu-item index="inputs">输入框</el-menu-item>
                            <el-menu-item index="timeframes">时间范围</el-menu-item>
                            <el-menu-item index="selects">下拉菜单</el-menu-item>
                            <el-menu-item index="cascades">级联选择</el-menu-item>
                            <el-menu-item index="tabs">选项卡</el-menu-item>
                            <el-menu-item index="textCheckBox">文本复选框</el-menu-item>
                            <el-menu-item index="timelines">时间轴</el-menu-item>
                          </el-submenu>

                        </el-submenu>
                      </el-submenu>

                      <el-submenu index="3">
                        <template slot="title">
                          <span>产品部署</span>
                        </template>
                        <el-menu-item index="public-deploy" >公有云部署</el-menu-item>
                        <el-menu-item index="private-deploy" >私有化部署</el-menu-item>
                      </el-submenu>

                      <el-menu-item index="updateLog">
                        <span slot="title">更新日志</span>
                      </el-menu-item>

                      <el-submenu index="video">
                        <template slot="title">
                          <span>视频专区</span>
                        </template>
                        <el-menu-item index="video-introduce" >产品介绍</el-menu-item>
                        <el-menu-item index="video-guide" >操作指南</el-menu-item>
                      </el-submenu>
                    </el-menu>
                  </div>
                </div>
              </div>

              <div class="page-component__content markdown-body" >
                <section class="content element-doc content" >
                  <component :is="articleComponent"></component>
                </section>
                
              </div>
              
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <Footer /> -->
  </div>
</template>

<script>

import "../../assets/styles/cms/cmsstyle.scss";
import 'github-markdown-css/github-markdown.css';
//import 'prismjs/themes/prism.css';
import Header from "@/views/cms/components/Header";
import Footer from "@/views/cms/components/Footer";
import demo from "@/views/cms/readme/productName.md";
import productName from '@/views/cms/readme/productName.md';

// console.log(demo)
export default {
  components: {
    Header,
    Footer,
    // demo, //() => import('./readme/'+mdName+'.md')
    productName,
  },
  data() {
    return {
      tabPosition: "left",
      isCollapse: false,
      // md: require('./readme/productName.md'),
      articleComponent : "productName",
    };
  },
  created(){
    
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleSelect(type) {
      // this.md = require('./readme/'+type+'.md');

      this.$options.components[type] = require(`./readme/${type}.md`).default
      this.articleComponent = type;
     
    },
    
  },
};
</script>

<style lang="scss" scoped>
/deep/ .inner-banner {
  position: relative;
  background-color: #fff;
  background-image: url(/static/img/inner-banner-bg-1-1.54540d16.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  padding-top: 0px;
  padding-bottom: 120px;
}
.main-cnt {
  padding: 0;
  margin-top: 0;
  height: 100%;
  min-height: auto;
  overflow: hidden;
  height: 800px;
}
.page-component__scroll {
  height: 100%;
  margin-top: 50px;
}
.el-scrollbar {
  overflow: hidden;
  position: relative;
}

.page-component.page-container {
  padding: 0;
}
.page-component {
  box-sizing: border-box;
  height: 100%;
}
.page-container {
  padding-top: 55px;
}
.container,
.page-container {
  width: 1140px;
  padding: 0;
  margin: 0 auto;
}
.page-component .page-component__nav {
  width: 240px;
  top: 140px;
  bottom: 0;
  transition: padding-top 0.3s;
  float: left;
  position: fixed
}
.page-component .page-component__content {
  padding-left: 260px;
  padding-bottom: 100px;
  box-sizing: border-box;
  float: left;
  height: auto;
  width: 900px;
}
.el-scrollbar__wrap{
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}
</style>